<template>
  <div class="printData-container app-container">
    <el-tabs v-model="activeName"  type="border-card" @tab-click="handleClick">
      <el-tab-pane label="应急卡" name="AQSC_YJCZK">
          <EmergencyCard v-if="isChildUpdate1"></EmergencyCard>
      </el-tab-pane>
      <el-tab-pane label="应知卡" name="AQSC_ZYCSWHYS_YZK">
          <AqscZycswhysYzk v-if="isChildUpdate2"></AqscZycswhysYzk>
      </el-tab-pane>
      <el-tab-pane label="承诺卡" name="AQSC_ZRCNK">
        <AqscZrcnk v-if="isChildUpdate3"></AqscZrcnk>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import EmergencyCard from './aqscYjczk'
  import AqscZycswhysYzk from "./aqscZycswhysYzk"
  import AqscZrcnk from "./aqscZrcnk"
  export default {
    name: "extend-printData",
    data() {
      return {
        activeName: 'AQSC_YJCZK',
        isChildUpdate1:true,
        isChildUpdate2:false,
        isChildUpdate3:false
      }
    },
    components:{EmergencyCard,AqscZycswhysYzk,AqscZrcnk},
    methods: {
      print() {
        let print = this.$refs[this.activeName].$refs.print.innerHTML
        let printPart = print + printStyle;
        let newTab = window.open('_blank');
        newTab.document.body.innerHTML = printPart;
        newTab.print();
        newTab.close();
      },
      handleClick(tab) {
          if(tab.name == "AQSC_YJCZK") {
              this.isChildUpdate1 = true;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
          } else if(tab.name == "AQSC_ZYCSWHYS_YZK") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = true;
              this.isChildUpdate3 = false;
          } else if(tab.name == "AQSC_ZRCNK") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = true;
          }
      }
    }
  }
</script>
<style lang="scss" scoped>
.printData-container {
  .el-tabs {
    width: 100%;
    height: 100%;
  }
  padding: 0;
  >>> .el-table thead.is-group th {
    background: #fff !important;
  }
  .prtBtn {
    position: absolute;
    right: 28px;
    top: 4px;
    z-index: 1;
  }
  >>> .el-tabs__content {
    height: calc(100% - 39px);
    .el-tab-pane {
      height: 100%;
    }
  }
  >>> .storage {
    width: 100%;
    margin: 0 auto;
    .el-table thead tr,
    .el-table thead tr th {
      color: #606266;
    }
  }
  >>> .el-table {
   width: 100%;
    margin: 0 auto;
    thead {
      color: #606266;
    }
  }
  >>> .bill {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    .bill-title {
      color: #606266;
    }
  }
}
</style>